<template>
  <el-button v-bind="props" icon="Refresh" @click="resetQuery" v-show="props.show">{{props.label}}</el-button>
</template>

<script setup lang="ts">
import eventBus from '@/event/eventBus';
import {getCurrentInstance, onMounted, onUnmounted,computed, ref,inject} from 'vue';
import { formModeKey } from '@/components/form/state.key';
import {
  executeQueryKey,resetKey
} from "@/config/app.keys";

interface Props {
  size?:string
  type?:string
  plain?:boolean
  text?:boolean
  bg?:boolean
  link?:boolean
  round?:boolean
  circle?:boolean
  loading?:boolean
  disabled?:boolean
  autofocus?:boolean
  formData?:object
  id?:string
  label:string
  resetComponents:string
  show?:boolean,//是否显示
}
const props = withDefaults(defineProps<Props>(), {
  label: '重置',
  show:true,
})
const formMode = inject(formModeKey)
const cMode = computed<FormFieldMode>(() => {
  if (props.mode) {
    return props.mode
  }
  if (formMode?.value) {
    return formMode.value
  }
  return "edit"
})
const resetQuery = () => {
  //循环需要重置的组件
  // 只有在 edit 模式下才执行删除操作
  if (cMode.value !== 'edit') {
    return;
  }
// 使用逗号作为分隔符拆分字符串
  let components   = props.resetComponents.split(",");
  for (let i = 0; i < components.length; i++) {
    let component = components[i];
    eventBus.$emit(component+"_"+resetKey);
  }
  eventBus.$emit(executeQueryKey)
}

</script>

<style scoped>

</style>
